<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Bootstrap5 实例</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="StyleSheet" href="../css/bootstrap.min.css" type="text/css" media="screen"/>
    <link rel="StyleSheet" href="../css/backstage.css" type="text/css" media="screen"/>
    <script src="../js/jquery-3.6.0.js"></script>
    <script src="../js/bootstrap.bundle.js"></script>

    <script type="text/javascript">
        $(function() {
            let workingUsername = "";

            //为所有的modify-account按钮绑定单击事件
            function bindModify() {
                $('.modify-account').each(function () {
                    $(this).on('click',function () {
                        const accountRow = this.parentNode.parentNode.parentNode;
                        workingUsername = $(accountRow).attr('id');
                        //发送ajax请求
                        $.get('/backstage/ajaxGetWorkingAccount','username=' + workingUsername,function (data){
                            $('#username').val(data.username);
                            $('#email').val(data.email);
                            $('#first-name').val(data.firstName);
                            $('#last-name').val(data.lastName);
                            $('#address1').val(data.address1);
                            $('#address2').val(data.address2);
                            $('#city').val(data.city);
                            $('#state').val(data.state);
                            $('#zip').val(data.zip);
                            $('#country').val(data.country);
                            $('#phone').val(data.phone);
                        });
                    });
                });
            }

            //为所有的reset-account按钮绑定单击事件
            function bindReset() {
                $('.reset-account').each(function () {
                    $(this).on('click',function () {
                        const accountRow = this.parentNode.parentNode.parentNode;
                        workingUsername = $(accountRow).attr('id');
                        $('#new-password').val('');
                    });
                });
            }
            
            //为搜索按钮绑定单击事件
            $('#search').on('submit', function () {
                $.get('/backstage/ajaxGetAllUser','keywords=' + $('#key-words').val(),function (data){
                    var html="";
                    for (var i = 0; i <data.length ; i++) {
                        html+= "<tr id='" + data[i].username + "'>" +
                            "<td>" + data[i].username + "</td>" +
                            "<td>" + data[i].firstName + " " + data[i].lastName + "</td>" +
                            "<td>" + data[i].country + "</td>" +
                            "<td>" + data[i].phone + "</td>" +
                            "<td>" + data[i].email + "</td>" +
                            "<td>" +
                            "<div class='btn-group' role='group' aria-label='Basic example'>" +
                            "<button type='button' class='btn btn-primary modify-account operation-btn' data-bs-toggle='modal' data-bs-target='#modifyAccount'>Modify</button>" +
                            "<button type='button' class='btn btn-primary reset-account operation-btn' data-bs-toggle='modal' data-bs-target='#resetAccount'>Reset</button>" +
                            "</div>" +
                            "</td>" +
                            "</tr>"
                    }
                    $("#content").html(html);

                    bindModify();
                    bindReset();
                });
                return false;
            })

            bindModify();
            bindReset();

            //为save-modify按钮绑定单击事件
            $('#save-modify').on('click', function () {
                $.post({
                    url:"/backstage/ajaxUpdateAccount",
                    data:{
                        'username':$('#username').val(),
                        'email':$('#email').val(),
                        'firstName':$('#first-name').val(),
                        'lastName':$('#last-name').val(),
                        'address1':$('#address1').val(),
                        'address2':$('#address2').val(),
                        'city':$('#city').val(),
                        'state':$('#state').val(),
                        'zip':$('#zip').val(),
                        'country':$('#country').val(),
                        'phone':$('#phone').val()
                    },
                    success: function (data) {
                        let accountRow = $('#' + workingUsername);
                        let test = accountRow.children('td');
                        test[0].innerText = data.username;
                        test[1].innerText = data.firstName + ' ' + data.lastName;
                        test[2].innerText = data.country;
                        test[3].innerText = data.phone;
                        test[4].innerText = data.email;

                        $('#close-modify').click();
                    }
                });
            })
            
            //为save-reset按钮绑定单击事件
            $('#save-reset').on('click',function () {
                const password = $('#new-password').val();

                //发送ajax请求
                $.get('/backstage/ajaxUpdatePassword','username=' + workingUsername + '&password=' + password,function (data){
                    $('#close-reset').click()
                });
            })

            //为cancel按钮绑定单击事件
            $('#cancel-modify').on('click', function () {
                $('#close-modify').click()
            })

            //为cancel按钮绑定单击事件
            $('#cancel-reset').on('click', function () {
                $('#close-reset').click()
            })
        })
    </script>

</head>
<body>
<main class="border-bottom bg-color">
    <div class="bg-dark my-nav">
        <header class="d-flex py-3">
            <a href="/" class="text-white text-decoration-none">
                <svg class="bi me-2" width="40" height="32"></svg>
                <span class="fs-4">MyPetStore后台管理系统</span>
            </a>

            <svg class="bi me-2" width="100" height="32"></svg>

            <ul class="nav nav-pills">
                <li class="nav-item"><a href="/backstage/main" class="nav-link" aria-current="page">Home</a></li>
                <li class="nav-item"><a href="/backstage/commodity" class="nav-link">商品管理</a></li>
                <li class="nav-item"><a href="/backstage/account" class="nav-link active">账号管理</a></li>
                <li class="nav-item"><a href="/backstage/order" class="nav-link">订单管理</a></li>
            </ul>
        </header>
    </div>


    <div class="bg-color">
        <div class="my-div bg-light radius">
            <div class="small-div">
                <form id="search" class="d-flex">
                    <input id="key-words" name="keywords" th:value="${session.keywords}" class="form-control me-2" type="search" placeholder="关键词" aria-label="Search">
                    <button class="btn btn-outline-success text-nowrap" type="submit">搜索用户</button>
                </form>
            </div>

            <hr>

            <div>
                <table class="table text-center my-table" id="user-table">
                    <thead class="table-dark">
                    <tr>
                        <th>UserId</th>
                        <th>Name</th>
                        <th>Country</th>
                        <th>Phone</th>
                        <th>Email</th>
                        <th>Operation</th>
                    </tr>
                    </thead>

                    <tbody id="content">
                    <tr th:each="account:${session.allAccount}" th:id="${account.username}" name="test">
                        <td th:name="${account.username}" th:text="${account.username}"></td>
                        <td th:text="|${account.firstName} ${account.lastName}|"></td>
                        <td th:text="${account.country}"></td>
                        <td th:text="${account.phone}"></td>
                        <td th:text="${account.email}"></td>

                        <td>
                            <div class="btn-group" role="group" aria-label="Basic example">
                                <button type="button" class="btn btn-primary modify-account operation-btn" data-bs-toggle="modal" data-bs-target="#modifyAccount">
                                    Modify
                                </button>
                                <button type="button" class="btn btn-primary reset-account operation-btn"  data-bs-toggle="modal" data-bs-target="#resetAccount">
                                    Reset
                                </button>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
        </div>
    </div>

    <div class="modal" id="modifyAccount">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">Modify Account Information</h4>
                    <button id="close-modify" type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <!-- 模态框内容 -->
                <div class="modal-body">
                    <div>
                        <label class="text-black">Username:</label>
                        <input id="username" th:value="${session.workingAccount.username}" type="text" class="form-control" placeholder="Username" readonly>
                    </div>
                    <div>
                        <label class="text-black">Email:</label>
                        <input id="email" th:value="${session.workingAccount.email}" type="text" class="form-control" placeholder="Email">
                    </div>
                    <div>
                        <label class="text-black">First Name:</label>
                        <input id="first-name" th:value="${session.workingAccount.firstName}" type="text" class="form-control" placeholder="First Name">
                    </div>
                    <div>
                        <label class="text-black">Last Name:</label>
                        <input id="last-name" th:value="${session.workingAccount.lastName}" type="text" class="form-control" placeholder="Last Name">
                    </div>
                    <div>
                        <label class="text-black">Address1:</label>
                        <input id="address1" th:value="${session.workingAccount.address1}" type="text" class="form-control" placeholder="Address1">
                    </div>
                    <div>
                        <label class="text-black">Address2:</label>
                        <input id="address2" th:value="${session.workingAccount.address2}" type="text" class="form-control" placeholder="Address2">
                    </div>
                    <div>
                        <label class="text-black">City:</label>
                        <input id="city" th:value="${session.workingAccount.city}" type="text" class="form-control" placeholder="City">
                    </div>
                    <div>
                        <label class="text-black">State:</label>
                        <input id="state" th:value="${session.workingAccount.state}" type="text" class="form-control" placeholder="State">
                    </div>

                    <div>
                        <label class="text-black">Zip:</label>
                        <input id="zip" th:value="${session.workingAccount.zip}" type="text" class="form-control" placeholder="Zip">
                    </div>

                    <div>
                        <label class="text-black">Country:</label>
                        <input id="country" th:value="${session.workingAccount.country}" type="text" class="form-control" placeholder="Country">
                    </div>

                    <div>
                        <label class="text-black">Phone:</label>
                        <input id="phone" th:value="${session.workingAccount.phone}" type="text" class="form-control" placeholder="Phone">
                    </div>
                </div>

                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button id="cancel-modify" type="button" class="btn btn-outline-primary">Cancel</button>
                    <button id="save-modify" class="btn btn-primary" type="submit">Save</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="resetAccount">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">Reset Account Password</h4>
                    <button id="close-reset" type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <!-- 模态框内容 -->
                <div class="modal-body">
                    <div>
                        <label class="text-black">New Password:</label>
                        <input id="new-password" type="text" class="form-control" placeholder="New Password">
                    </div>
                </div>

                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button id="cancel-reset" type="button" class="btn btn-outline-primary">Cancel</button>
                    <button id="save-reset" class="btn btn-primary" type="submit">Reset</button>
                </div>
            </div>
        </div>
    </div>

</main>
</body>
</html>